<template>
    <div class="top-bar" @click="handleClick">
        <i id="move" class="icon iconfont icon-move" title="平移"></i>
        <i id="zoomIn" class="icon iconfont icon-fangda" title="放大"></i>
        <i id="zoomOut" class="icon iconfont icon-suoxiao" title="缩小"></i>
        <i id="fullscreen" class="icon iconfont icon-quanping" title="全屏"></i>
        <i id="reset" class="icon iconfont icon-15qingkong-1" title="清空"></i>
        <i id="export" class="icon iconfont icon-shujuwajue" title="导出数据"></i>
        <i id="download" class="icon iconfont icon-xiazai" title="下载"></i>
        <input :value="text" @input="handleTextChange" />
    </div>
</template>

<script setup>
    defineProps({
        text: String
    });
    const emits = defineEmits(['onChange']);
    const handleClick = event => {
        const type = event.target.id;
        type && emits('onChange', type);
    };
    const handleTextChange = event => {
        emits('update:text', event.target.value);
    };
</script>

<style lang="scss" scoped>
    .top-bar{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 64px;
        .iconfont{
            padding: 10px;
            transition: all .2s ease-in-out;
            &:hover{
                background-color: #363636;
            }
        }
        input{
          outline: none;
        }
    }
</style>